<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary">默认样式</a></li>
                <li><a href="#src-components-Button-demo-secondary">次要按钮</a></li>
                <li><a href="#src-components-Button-demo-tertiary">三级按钮</a></li>
                <li><a href="#src-components-Button-demo-icon">带Icon的按钮</a></li>
                <li><a href="#src-components-Button-demo-text">文字按钮</a></li>
                <li><a href="#src-components-Button-demo-btn-group">按钮组</a></li>
                <li><a href="#src-components-Button-demo-loading">带loading的按钮</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>上传下载组件</h1>
        <section class="markdown">
            <h2 id="如何使用"><span>如何使用</span><a href="#如何使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-1-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div class="row">
                      <div class="col-xs-12">
                        <div class="box box-default">
                          <div class="box-header with-border">
                            <h3 class="box-title">导入导出</h3>
                          </div>
                          <div class="box-body">
                            <h3>导出</h3>
                            <input type="text" id="JS_MyName">
                            <a class="btn btn-primary" id="JS_export">导出</a>
                          </div>
                          <div class="box-body">
                            <h3>导入</h3>
                            <input type="file" id="JS_MyFile" style="display: inline-block;">
                            <button class="btn btn-primary" id="JS_import">导入</button>
                          </div>
                          <div class="box-body">
                            <h3>支持IE8/9的导入</h3>
                            <form enctype="multipart/form-data" action="/import/ImportHandler/importToDb" method="post" target="id_iframe">
                                <input type="file" id="JS_MyFile" style="display: inline-block;">
                            <button type="submit" class="btn btn-primary" id="JS_importIE8">导入</button>
                            </form>
                            <iframe id="id_iframe" name="id_iframe" style="display:none;"></iframe>
                          </div>
                        </div>
                      </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"></div>
                    <div>
                         <p>以上功能需要后台支持，文档中只提供demo代码</p>
                         <p>如果系统要兼容<code>IE8/9</code>请使用支持<code>IE8/9</code>的导入模式，请注意支持<code>IE8/9</code>上传只能使用表单提交！</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code ><h4>HTML</h4>&lt;div class=&quot;box-body&quot;&gt;
&lt;h3&gt;导出&lt;/h3&gt;
&lt;input type=&quot;text&quot; id=&quot;JS_MyName&quot;&gt;
&lt;a class=&quot;btn btn-primary&quot; id=&quot;JS_export&quot;&gt;导出&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;box-body&quot;&gt;
&lt;h3&gt;导入&lt;/h3&gt;
&lt;input type=&quot;file&quot; id=&quot;JS_MyFile&quot; style=&quot;display: inline-block;&quot;&gt;
&lt;button class=&quot;btn btn-primary&quot; id=&quot;JS_import&quot;&gt;导入&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;box-body&quot;&gt;
&lt;h3&gt;支持IE8的导入&lt;/h3&gt;
&lt;form enctype=&quot;multipart/form-data&quot; action=&quot;/import/ImportHandler/importToDb&quot; method=&quot;post&quot; target=&quot;id_iframe&quot;&gt;
    &lt;input type=&quot;file&quot; id=&quot;JS_MyFile&quot; style=&quot;display: inline-block;&quot;&gt;
&lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; id=&quot;JS_import&quot;&gt;导入&lt;/button&gt;
&lt;/form&gt;
&lt;iframe id=&quot;id_iframe&quot; name=&quot;id_iframe&quot; style=&quot;display:none;&quot;&gt;&lt;/iframe&gt;
&lt;/div&gt;


</code></pre>
<pre class="javascript">
<code><h4>导入JS方法(IE8/9除外)</h4>import: function() {
  var self = this;
  Page.findId('import').bind('click', function () {
      var _file = {
          file: Page.findId('MyFile')[0].files[0]
      };
      $.ajaxUpload({
          url: srvMap.get('import'),
          data: _file,
          success: function(data, status, xhr) {
              if (data.retCode == 2000) {
                  window.XMS.msgbox.show(data.data, 'success', 2000);
              } else {
                  window.XMS.msgbox.show(data.retMessage, 'error', 2000);
              }

          }
      });
  })
}
</code>
</pre>

<pre class="javascript">
<code><h4>直接上传到FTP</h4>//上传到FTP服务器
uploadFtp: function () {
    var self = this;
    Page.findId('upload').bind('click', function () {
        var _file = {
            file: Page.findId('FTPfile')[0].files[0], //文件对象
            path: 'file/files/', //文件上传路径
            aliasNames:"{file:['test.jpg']}"  //文件别名
        };
        $.ajaxUpload({
            url: '/upload',
            data: _file,
            success: function (data, status, xhr) {
                if (data.file.length == 0) {
                    window.XMS.msgbox.show('上传失败！', 'error', 2000);
                } else {
                    window.XMS.msgbox.show('上传成功！', 'success', 2000);
                }

            }
        });
    });
}
</code>
</pre>

<pre class="javascript">
<code><h4>直接从FTP下载</h4>//直接从FTP下载
downloadFtp: function () {
    var self = this;
    Page.findId('downloadFTP').bind('click', function () {
        var cmd = "1.pdf";
        $(this).attr("href", '/download/' + cmd);
        return true;
        Page.findId('downloadFTP').click();
    })
}
</code>
</pre>

</code></pre>
<pre class="javascript">
<code><h4>导出方法</h4>export:function () {
  var self = this;
  console.log(Page.findId('export'));
  Page.findId('export').bind('click', function () {
      var cmd = "myname=" + Page.findId('MyName').val();
      $(this).attr("href", srvMap.get('export') + "?" + cmd);
      return true;
      Page.findId('export').click();
  })
}
</code>
</pre>
                    </div>
                </section>
            </section>
            
        <style>
        #src-components-Button-demo-btn-group .atui-btn-group {
            margin-bottom: 10px;
        }
        </style>
    </section>
</article>